<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>23201012827 魏巍</title>
    <script src="font/iconfont.js"></script>
    <script src="font_d42l8r0ck9c/iconfont.js"></script>
    <style>
        body{
            background-color: #f6f6f6;
        }
        /* 百货页上轮播图 */
        body,ul,p{
            padding: 0;
            margin: 0;
        }
        ul{
            letter-spacing: none;
        }
        img{
            border: none;
            display: block;
        }
        .slide{
            overflow: hidden;/* 溢出隐藏，不是bfc */
        }
        .slide{
            width: 500%;
            overflow: hidden;/* bfc */
            animation: wei/* 你的姓 */ 10s/* 时间 */ infinite/* 无限循环 */;
        }
        .slide li{
            width: 20%;
            float: left;/* li要横过来 */
            position: relative;
        }
        .slide img{
            width: 100%;
            height: 100%;
        }
        @keyframes wei{
            10%{
                margin-left: 0;/* 0~1s */
            }
            20%{
                margin-left: -100%;/* 1~2s */
            }
            30%{
                margin-left: -100%;/* 2~3s */
            }
            40%{
                margin-left: -200%;/* 3~4s */
            }
            50%{
                margin-left: -200%;/* 4~5s */
            }
            60%{
                margin-left: -300%;/* 5~6s */
            }
            70%{
                margin-left: -300%;/* 6~7s */
            }
            80%{
                margin-left: -400%;/* 7~8s */
            }
            90%{
                margin-left: -400%;/* 8~9s */
            }
            100%{
                margin-left: 0;/* 最后一个需要和初始状态(0%)一致 */
            }
        }


/* 百货热销 */
.slist{
            display: flex;
            flex-wrap: wrap;
            margin: 5px 5px 70px 5px;
        }
        .slist>li{
            width: 40%;
            flex-grow: 1;
            margin: 5px 5px 10px 5px;
            border: 1px solid #ccc;
            background-color: #fff;
        }
        .slist>li:first-child{
            margin-left: 0;
        }
        .slist img{
            width: 100%;
        }
        .slist p{
            font-size: 16px;
            text-align: center;
            line-height: 25px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }




        /* 下导航 */
.icon {
           width: 1em;
           height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .bnav{
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            z-index: 9;
            width: 100%;
        }
        .body{
            margin-bottom: 50px;
        }
        .bnav>ul{
            display: flex;
        }
        .bnav li{
            width: 20%;
            text-align: center;
        }
        .icon{
            font-size: 36px;
            margin: 5px 0;
        }
        

    </style>
</head>
<body>
    <!-- 百货页上轮播图 -->
    <div class="slide">
        <ul>
            <li>
                <a href="#"><img src="img/百货页/百货页轮播图1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="img/百货页/百货页轮播图2.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="img/百货页/百货页轮播图3.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="img/百货页/百货页轮播图1.jpg"></a>
            </li>
            <li>
                <a href="#"><img src="img/百货页/百货页轮播图2.jpg"></a>
            </li>
        </ul>
    </div>

    <!-- 中间字 -->
<p>百货热销</p>
<!-- 百货热销 -->
<ul class="slist">
    <li>
        <a href=""><img src="img/百货页商品图/图1.png"></a>
        <p>【新品】喜茶空茶0糖0卡0脂饮料玄米大麦茶/水仙乌龙茶*15瓶整箱<br>￥72.6</p>
    </li>
    <li>
        <a href=""><img src="img/百货页商品图/图2.png"></a>
        <p>喜茶浓果茶50%真果汁低糖0脂果汁茶饮料450ml*12瓶/15瓶整箱<br>￥82.40</p>
    </li>
    <li>
        <a href=""><img src="img/百货页商品图/图3.png"></a>
        <p>【新品】喜茶轻果茶低糖饮料450ml*12瓶/15瓶整箱<br>￥64.80</p>
    </li>
    <li>
        <a href=""><img src="img/百货页商品图/图4.png"></a>
        <p>【新品】喜茶一颗柠檬低糖饮料450ml*12瓶/15瓶<br>￥64.80</p>
    </li>
    <li>
        <a href=""><img src="img/百货页商品图/图5.png"></a>
        <p>灵感一周茶礼盒7款喜茶经典茗茶7袋/盒<br>￥39.40</p>
    </li>
    <li>
        <a href=""><img src="img/百货页商品图/图6.png"></a>
        <p>喜茶真花茶礼盒 冷泡茶包伴手礼4口味混合装 8包/盒<br>￥33.20</p>
    </li>
</ul>


    <!-- 下导航 --> 
  <bav class="bnav" style="background-color: #fff;">
    <ul>
        <li>
            <a href="./index.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./diandan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinpinbanjia"></use>
                </svg>
                <p>点单</p>
            </a>
        </li>
        <li>
            <a href="./baihuo.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan"></use>
                </svg>
                <p>百货</p>
            </a>
        </li>
        <li>
            <a href="./dingdan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <p>订单</p>
            </a>
        </li>
        <li>
            <a href="./huiyuan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chengyuan"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
  </ul>
  </bav>

</body>
</html>